<template>
  <div class="icons">

    <swiper :options="swiperOption" >
      <swiper-slide v-for="(pageItem, index) in page" :key=index>
        <div class="icons-item" v-for="(item, index) in pageItem" :key=item.id>
          <img :src=item.imgUrl alt="">
          <p>{{item.title}}</p>
        </div>
      </swiper-slide>

    </swiper>




  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption:{
        pagination: {
          el: '.swiper-pagination',

        },
        loop:true
      },
      iconsList:[
        {
          id:'01',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'02',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'03',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'04',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'05',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'06',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'07',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'08',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'09',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },
        {
          id:'10',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          title:'景点门票'
        },

      ]
    }
  },
  computed:{
    page(){
      let pages = [];
      this.iconsList.forEach((item,index)=>{
        let idx = Math.floor(index/8);
        if(!pages[idx]) pages[idx] = [];
        pages[idx].push(item);
      })
      return pages;
    }
  }
}
</script>

<style scoped>

.icons{
  width: 100%;
  overflow: hidden;
}

.icons-item{
  width: 25%;
  padding-bottom: 25%;
  height: 0;
  float: left;
}
.icons-item img{
  width: 55px;
  height: 55px;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
}
.icons-item p{
  font-size: 14px;
  text-align: center;
}
</style>
